<template>
  <ve-modal title="作废订单" v-model="visible" cancelText="取消" @close="visible = false" @confirm="onConfirm">
    <ve-form :model="form" ref="formRef" :rules="rules">
      <view class="invalid-tips"> 订单作废后，系统不能自动恢复同时对应订单产生费用也会作废，不进行统计；未发起的合同也将会无效，请确认是否作废当前订单？ </view>
      <ve-form-item label="备注" prop="invalidRemark"  labelPosition="top" :borderBottom="false">
        <ve-input type="textarea" :maxlength="200" v-model="form.invalidRemark" placeholder="请输入备注" />
      </ve-form-item>
    </ve-form>
  </ve-modal>
  <ve-toast ref="toast" />
</template>
<script setup>
  import { ref } from 'vue'
  import { invalidOrderAPI } from '@/api/order/sOrder'
  const emit = defineEmits(['ok'])
  const visible = ref(false)
  const form = ref({})
  const open = (record) => {
    visible.value = true
    form.value = {
      id: record.id,
    }
  }
  const rules = {
    invalidRemark: {
      required: false,
      message: '请输入备注',
    },
  }
  // 点击确认
  const formRef = ref()
  const toast = ref()
  const onConfirm = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        invalidOrderAPI(form.value).then(() => {
          visible.value = false
          toast.value.show({
            title: '操作成功',
            type: 'success',
          })
          emit('ok')
        })
      }
    })
  }
  defineExpose({
    open,
  })
</script>
<style lang="less" scoped></style>
